<template>
  <div style="padding: 8px;" v-loading="loading">
    <el-dialog :title="id ? '编辑' : '添加'" v-loading="loading" :visible.sync="isShow" width="30%"
      :before-close="handleClose">
      <div style="display: flex; flex-direction: column; align-items: flex-start;">
        <span>中文版banner图片为: </span>
        <ImgUpload ref="zh" @editChinaImage="editChinaImage" :ChinaImage="ChinaImage" style="display: inline-block;"
          :isShowTip="true" :limit="1"></ImgUpload>
      </div>
      <div style="display: flex; flex-direction: column; align-items: flex-start;">
        <span>英文版banner图片为: </span>
        <ImgUpload ref="en" @editEnglishImage="editEnglishImage" :EnglishImage="EnglishImage"
          style="display: inline-block;" :isShowTip="true" :limit="1">
        </ImgUpload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
    <el-card>
      <el-button size="samll" type="primary" @click="onSubmit">添加banner</el-button>
      <el-table :data="tableData" style="width: 100%;margin-top: 8px;">
        <el-table-column label="中文图片">
          <template #default="{ row }">
            <el-image :preview-src-list="[row.chineseUrl]" style="width: 200px;height: 100px;" :src="row.chineseUrl"
              fit="fit"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="英文图片">
          <template #default="{ row }">
            <el-image :preview-src-list="[row.englishUrl]" style="width: 200px;height: 100px;" :src="row.englishUrl"
              fit="fit"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
        </el-table-column>
        <el-table-column width="100" label="操作">
          <template #default="{ row }">
            <el-button style="display: inline;" type="text" size="mini" @click="edit(row)">编辑</el-button>
            <el-button style="display: inline;" type="text" size="mini" @click="del(row.id)"><span
                style="color: red;">删除</span></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import ImgUpload from "./components/ImgUpload";
import { getBannerApi, editBannerApi, addBannerApi, delBannerApi } from '@/api/appuser/banner.js'
export default {
  components: {
    ImgUpload,
  },
  data() {
    return {
      ChinaImage: { url: '', ossId: '' },
      EnglishImage: { url: '', ossId: '' },
      isShow: false,
      loading: false,
      tableData: [],
      id: null
    };
  },
  created() {
    this.getBanner()
  },
  methods: {
    onSubmit() {
      console.log(this.ChinaImage);
      this.isShow = true;
    },
    async save() {
      this.loading = true
      //正则转化
      const pattern = /(http:\/\/[^?]+)/;
      const matchC = this.ChinaImage.url.match(pattern);
      const matchE = this.EnglishImage.url.match(pattern);
      if (matchC) {
        this.ChinaImage.url = matchC[0];
      } else {
        console.log("未能匹配到主链接部分");
      }
      if (matchE) {
        this.EnglishImage.url = matchE[0];
      } else {
        console.log("未能匹配到主链接部分");
      }
      console.log(this.ChinaImage.url);
      console.log(this.EnglishImage.url);
      if (this.id) {
        await editBannerApi({
          chineseUrl: this.ChinaImage.url,
          englishUrl: this.EnglishImage.url,
          id: this.id
        })
        this.$message.success('编辑成功')
      } else {
        await addBannerApi({
          chineseUrl: this.ChinaImage.url,
          englishUrl: this.EnglishImage.url
        })
        this.$message.success('添加成功')
      }
      this.handleClose()
      this.getBanner()
    },
    cancel() {
      this.handleClose()
    },
    async getBanner() {
      this.loading = true
      const res = await getBannerApi()
      console.log(res);
      this.tableData = res.data
      this.loading = false
    },
    editChinaImage(val) {
      console.log(val);
      this.ChinaImage.url = val.url
      this.ChinaImage.ossId = val.ossId
    },
    editEnglishImage(val) {
      console.log(val);
      this.EnglishImage.url = val.url
      this.EnglishImage.ossId = val.ossId
    },
    async del(id) {
      this.$confirm('是否删除此banner', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.loading = true
        await delBannerApi(id)
        this.$message.success('删除成功')
        this.getBanner()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
        this.getBanner()
      });
    },
    handleClose() {
      this.id = null
      this.ChinaImage = {}
      this.EnglishImage = {}
      this.isShow = false
    },
    edit(row) {
      console.log(row);
      this.id = row.id
      this.isShow = true;
      this.$nextTick(() => {
        this.ChinaImage = { url: row.chineseUrl }
        this.EnglishImage = { url: row.englishUrl }
      })

    },
  },
};
</script>
<style lang='' scoped>
</style>